<template>
    <el-container>
        <el-header style="height: 90px">
            <el-container>
                <SearchDatePicker v-model="data.lastactiveDate" class="query_input" placeholder="请选择最后活跃日期" />
                <el-date-picker class="query_input" v-model="data.revisitTimeList" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="回访开始日期" end-placeholder="回访结束日期" />
                <BelongToSelect class="query_input" v-model="data.belongTo" />
                <SearchInput placeholder="请输入昵称、手机号码" class="query_input" v-model="data.nicknameOrPhone" />
                <SearchInput placeholder="请输入用户MU" class="query_input" v-model="data.mu" />
                <SearchInput placeholder="请输入意向" class="query_input" v-model="data.intention" />
            </el-container>
            <el-container style="margin-top: 15px">
                <SearchInput placeholder="请输入OpenID" style="width: 680px" class="query_input" v-model="data.openid" />
                <SearchButton :click="search" />
            </el-container>
        </el-header>
        <el-main>
            <el-table stripe :data="tableData" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading.fullscreen.lock="loading">
                <el-table-column prop="id" label="编号" width="50" />
                <el-table-column prop="mu" label="MU" width="80" />
                <el-table-column prop="nick" label="昵称" width="80" />
                <el-table-column label="头像" width="120">
                    <template #="{head}">
                        <Avatar :src="head" />
                    </template>
                </el-table-column>
                <el-table-column v-if="isShowPhone" prop="phone" label="手机号码" width="120" />
                <el-table-column label="性别" width="60">
                    <template #="{sex}">
                        <div v-if="sex == '0'">未知</div>
                        <div v-if="sex == '1'">男</div>
                        <div v-if="sex == '2'">女</div>
                    </template>
                </el-table-column>
                <el-table-column label="经纬/微信" min-width="100">
                    <template #="{prov,city,dist,addr,wxprov,wxcity,wxdist}">
                        {{ prov }} {{ city }} {{ dist }}<br />{{ addr }}
                        <el-divider v-if="prov && wxprov" />
                        {{ wxprov }} {{ wxcity }} {{ wxdist }}
                    </template>
                </el-table-column>
                <el-table-column label="来源/页面" width="100">
                    <template #="{referrerNick,source}">
                        {{ referrerNick }}
                        <el-divider v-if="referrerNick && source" />
                        {{ source }}
                    </template>
                </el-table-column>
                <el-table-column label="微信归属" width="100">
                    <template #="scope">
                        <el-select placeholder="归属" v-model.trim="tableData[scope.$index].belongTo" @change="(belongTo) => saveUser(scope.rowmu, { belongTo: scope.row.belongTo })">
                            <el-option v-for="item in belongTos" :key="item" :label="item" :value="item" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="回访时间" width="150">
                    <template #="scope">
                        <el-date-picker style="width: 140px" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="tableData[scope.$index].revisitTime" @change="saveUser(mu, { revisitTime })" placeholder="回访日期" />
                    </template>
                </el-table-column>
                <el-table-column label="报备" width="140">
                    <template #="{reported}">
                        <div v-for="item in reported" :key="item">
                            {{ item }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="intention" label="意向" width="240">
                    <template #="scope">
                        <el-input type="textarea" v-model="tableData[scope.$index].intention" :autosize="{ minRows: 8, maxRows: 18 }" @change="saveUser(scope.row.mu, { intention: scope.row.intention })">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="创建/活跃" width="100">
                    <template #="{createTime,lastactiveTime}">
                        {{ createTime }}
                        <el-divider />
                        {{ lastactiveTime }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #="{searchcount,visitcount,casecount,noReportedCount,bookcount,reportedCount,mu}">
                        <PlainButton :text="`搜索${searchcount}`" :click="() => openWindow(mu, 'usersearch')" />
                        <PlainButton :text="`主页${visitcount}`" :click="() => openWindow(mu, 'uservisitcount')" />
                        <PlainButton :text="`案例${casecount}`" :click="() => openWindow(mu, 'usercasevisit')" />
                        <el-badge :value="noReportedCount" :hidden="noReportedCount == 0">
                            <PlainButton :text="`报备${reportedCount}`" :click="() => openWindow(mu, 'userreport')" />
                        </el-badge>
                        <el-button plain :type="bookcount > 0 ? 'success' : ''" @click="openWindow(mu, 'userbookcount')">
                            预约{{ bookcount }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <SearchPagination :currentPage="currentPage" :total="total" :limit="limit" @handleCurrentChange="e = getCurrentPage(e)" @handleSizeChange="(e) => getLimit(e)" />
        </el-main>
    </el-container>
</template>

<script>
import BelongToSelect from '@/app/components/BelongToSelect';
import Data from '@/chaos/functions/common/Data';
import useTableData from './useTableData';
import useIsShowPhone from './useIsShowPhone';
import usePage from './usePage';

import { reactive } from 'vue';

export default {
    name: 'UsersPage',
    components: {
        BelongToSelect
    },
    props: {
        path: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            belongTos: ['', '小晴', '小样', '小雨', '小A']
        };
    },
    setup(props) {
        if (!props.path) return;
        const roleName = this.$store.getters.user.roleName;
        let searchMethod = '';
        if (props.path === 'revisit') searchMethod = 'revisitusers';
        if (props.path === 'adminuser') searchMethod = 'kolusers';
        if (props.path === 'noreprot') searchMethod = 'noReprotUsers';
        if (props.path === 'userlist') searchMethod = 'users';

        const data = reactive({
            lastactiveDate: '',
            revisitTimeList: '',
            belongTo: '',
            nicknameOrPhone: '',
            mu: '',
            intention: '',
            openid: ''
        });

        const { currentPage, getCurrentPage, limit, getLimit } = usePage();
        const { tableData, total, loading } = useTableData(
            searchMethod,
            data,
            currentPage,
            limit
        );
        const { isShowPhone } = useIsShowPhone(roleName);
        return {
            tableData,
            total,
            loading,
            isShowPhone,
            getCurrentPage,
            getLimit
        };
    },
    methods: {
        openWindow(userMu, p) {
            const path = `/${p}/${userMu}`;
            const { href } = this.$router.resolve({ path });
            window.open(href, '_blank');
        },
        saveUser(mu, data) {
            Data.update(this.domain, mu, data);
        }
    }
};
</script>

<style lang="less" scoped>
.query_input {
    margin-right: 10px;
}
</style>
